<template>
    <div class="card-head-content">
        <div class="left-wrap">
            <div class="head-img">
                <image class="img" :src="dataInfo.userAvatar" />
            </div>
            <div class="author-info">
                <div class="author-name">
                    {{ dataInfo.nickname }} <image class="label-img" :src="IconGirl" mode="scaleToFill" />
                </div>
                <div class="author-phone">{{ dataInfo.phone }}</div>
            </div>
        </div>
        <!-- 去设置 -->
        <div class="right-wrap" @click="handleToSetting">
            <image class="icon" :src="IconSet" mode="scaleToFill" />
        </div>
    </div>
</template>
  
<script setup lang="ts">
import { defineProps, withDefaults } from 'vue'
import IconGirl from '@/assets/mine/girl.png'
import IconSet from '@/assets/mine/set.png'
interface IProps {
    dataInfo: any
}
withDefaults(defineProps<IProps>(), {
    dataInfo: {}
})
const handleToSetting = (): viod => {
    uni.navigateTo({
        url: '/minePages/settin/index'
    })
}
</script>
  
<style lang="scss" scoped>
.card-head-content {
    height: 120px;
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    // align-items: center;
    .left-wrap {
        display: flex;
        align-items: center;
        .head-img {
            width: 80px;
            height: 80px;
            border-radius: 100%;
            .img {
                width: 100%;
                height: 100%;
                border-radius: 50%;
            }
        }
        .author-info {
            margin-left: 10px;
            .author-name {
                font-size: 12px;
                display: flex;
                align-items: center;
                font-weight: bold;
                .label-img {
                    width: 23px;
                    height: 23px;
                }
            }
            .author-phone {
                font-size: 12px;
                color: #9f9f9f;
                margin-top: 4px;
            }
        }
    }
    .right-wrap {
        width: 26px;
        height: 26px;
        .icon {
            width: 100%;
            height: 100%;
        }
    }
}
</style>